<!--
 * @Author: ZhaoZhiqi
 * @Date: 2024-04-29 14:29:59
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2024-06-21 15:25:27
 * @Description: 缴费记录
 * @FilePath: \parking-mini\src\pages\order_list.vue
-->
<template>
    <div class="container">
        <u-tabs :scrollable="false" :list="tabs" @change="tabChange"></u-tabs>
        <!-- 停车缴费记录 -->
        <div v-if="tabIndex === 0" class="list">
            <div class="item" v-for="(item, index) in list" :key="index">
                <div class="item-top">
                    <div class="item-number">{{ item.plateNumber }}</div>
                    <div class="item-type">停车时长：{{ item.parkingDuration }}</div>
                </div>
                <div class="item-middle">
                    <img v-if="item.orderType == 1" class="item-img" :src="imgs.type2" alt="" />
                    <img v-else class="item-img" :src="imgs.type1" alt="" />
                    <div class="item-info">
                        <div class="item-price">￥ {{ item.paidAmount }}</div>
                        <div class="item-place">{{ item.parklotName }}</div>
                    </div>
                    <div class="item-arrow"></div>
                </div>
                <div class="item-bottom">进场时间：{{ item.inTime }}</div>
                <div class="item-bottom">出场时间：{{ item.outTime }}</div>
                <div class="item-bottom">支付时间：{{ item.paidTime }}</div>
            </div>
            <div v-if="hasMore" class="load-more" @click="query">加载更多</div>
            <div v-else class="no-more">暂无更多</div>
        </div>
        <!-- 月卡记录 -->
        <div v-else class="list">
            <div class="item" v-for="(item, index) in vipOrderList" :key="index">
                <div class="item-top">
                    <div class="item-type">订单号：{{ item.tradeNo }}</div>
                </div>
                <div class="item-middle">
                    <img class="item-img" :src="imgs.type3" alt="" />
                    <div class="item-info">
                        <div class="item-price" style="margin-bottom: 0">￥ {{ item.amount }}</div>
                    </div>
                    <div class="item-arrow"></div>
                </div>
                <div class="item-bottom">支付时间：{{ item.createTime }}</div>
            </div>
        </div>
    </div>
</template>
<script>
import { getChargeOrderListAPI, getVipOrderListAPI } from "../api/api";

const app = getApp();
export default {
    data() {
        return {
            imgs: app.globalData.imgs,
            list: [],
            vipOrderList: [],
            hasMore: false,
            excludeIds: "",
            loading: false,
            tabIndex: 0,

            tabs: [
                {
                    name: "停车缴费",
                },
                {
                    name: "月卡订单",
                },
            ],
        };
    },
    onShareAppMessage() {},
    onLoad() {
        this.query();
        this.queryVipList();
    },
    methods: {
        tabChange(e) {
            this.tabIndex = e.index;
        },
        query() {
            if (this.loading) return false;
            this.loading = true;
            getChargeOrderListAPI({
                turnDirection: this.excludeIds ? "page_down" : "first_page",
                excludeIds: this.excludeIds,
                token: wx.getStorageSync("dada_token"),
            })
                .then((res) => {
                    this.hasMore = res.hasNextPage;
                    this.excludeIds = this.hasMore ? res.excludeIds : "";
                    let orders = res.orders || [];
                    this.list = [...this.list, ...orders];
                    this.loading = false;
                })
                .catch((err) => {
                    this.loading = false;
                });
        },
        queryVipList() {
            getVipOrderListAPI({
                openId: wx.getStorageSync("parking_openid"),
            }).then((res) => {
                this.vipOrderList = res || [];
            });
        },
    },
};
</script>
<style scoped lang="scss">
@import "../assets/scss/common.scss";
</style>
<style scoped lang="scss">
.container {
    padding-bottom: 50rpx;
    .list {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 32rpx;
        .item {
            width: 686rpx;
            box-sizing: border-box;
            padding: 0 34rpx 10rpx;
            margin-bottom: 32rpx;
            background-color: #f8f8f8;
            border-radius: 24rpx;
            .item-top {
                margin-top: 31rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 30rpx;
                .item-number {
                    color: #000000;
                    font-size: 36rpx;
                    line-height: 1;
                    font-weight: bold;
                }
                .item-type {
                    color: #757575;
                    font-size: 24rpx;
                    line-height: 1;
                    font-weight: bold;
                }
            }
            .item-middle {
                display: flex;
                align-items: center;
                margin-bottom: 24rpx;
                .item-img {
                    width: 91rpx;
                    height: 91rpx;
                    // background-color: #ccc;
                    margin-right: 34rpx;
                    border-radius: 50%;
                }
                .item-info {
                    .item-price {
                        color: #000000;
                        font-size: 42rpx;
                        line-height: 1;
                        font-weight: bold;
                        margin-bottom: 12rpx;
                    }
                    .item-place {
                        color: #757575;
                        font-size: 24rpx;
                        line-height: 1;
                    }
                }
            }
            .item-bottom {
                color: #757575;
                font-size: 24rpx;
                line-height: 1;
                margin-bottom: 18rpx;
            }
        }
    }
    .load-more {
        text-align: center;
        margin: 20rpx 0;
        font-size: 24rpx;
        color: #6794f6;
    }
    .no-more {
        text-align: center;
        margin: 20rpx 0;
        font-size: 24rpx;
        color: #999;
    }
}
</style>
